<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      ul{
        /* padding: 20px 20px; */
        height: 30px;
      }
      li{
        list-style: none;
        width: 150px;
        height: 30px;
        background: black;
        float: left;
        border-right: 1px solid white;
        color: white;
        text-align: center;
        line-height: 30px;
      }
      li:after{
        content: ' ';
        width: 150px;
        height: 150px;
        /* display: block; */
        /* display: none; */
        background: red;
      }
      li:hover:after{
        display: block;
      }
      .bottom{
        width: 100px;
        height: 100px;
        background: #f99;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>设计费</li>
      <li>水电费</li>
      <li>刚发的</li>
      <li>记录</li>
      <li>电饭锅</li>
      <li>耦合</li>
    </ul>
    <div class="bottom">

    </div>
  </body>
</html>
